<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      th:replace="~{layout/base :: layout(~{::title}, ~{::section})}">
<head>
    <title>我的书单 - 电子书下载平台</title>
</head>
<body>
    <section>
        <div class="container py-5">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>我的书单</h2>
                <div>
                    <a th:href="@{/booklists}" class="btn btn-outline-primary me-2">
                        <i class="fas fa-globe me-2"></i>公开书单
                    </a>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createBooklistModal">
                        <i class="fas fa-plus-circle me-2"></i>创建新书单
                    </button>
                </div>
            </div>
            
            <!-- 筛选 -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="d-flex flex-wrap">
                        <button class="btn me-2 mb-2 color-filter-btn" data-color="all">
                            所有书单
                        </button>
                        <button class="btn btn-outline-danger me-2 mb-2 color-filter-btn" data-color="#dc3545">
                            <i class="fas fa-circle me-1 text-danger"></i>红色
                        </button>
                        <button class="btn btn-outline-primary me-2 mb-2 color-filter-btn" data-color="#0d6efd">
                            <i class="fas fa-circle me-1 text-primary"></i>蓝色
                        </button>
                        <button class="btn btn-outline-success me-2 mb-2 color-filter-btn" data-color="#198754">
                            <i class="fas fa-circle me-1 text-success"></i>绿色
                        </button>
                        <button class="btn btn-outline-warning me-2 mb-2 color-filter-btn" data-color="#ffc107">
                            <i class="fas fa-circle me-1 text-warning"></i>黄色
                        </button>
                        <button class="btn btn-outline-info me-2 mb-2 color-filter-btn" data-color="#0dcaf0">
                            <i class="fas fa-circle me-1 text-info"></i>青色
                        </button>
                        <button class="btn btn-outline-secondary me-2 mb-2 color-filter-btn" data-color="#6c757d">
                            <i class="fas fa-circle me-1 text-secondary"></i>灰色
                        </button>
                        <button class="btn btn-outline-dark me-2 mb-2 color-filter-btn" data-color="#212529">
                            <i class="fas fa-circle me-1 text-dark"></i>黑色
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 书单列表 -->
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4" id="booklistsContainer">
                <!-- 动态数据 -->
                <div class="col booklist-item" th:each="booklist : ${userBooklists}" 
                     th:data-color="${booklist.colorTag}">
                    <div class="card h-100 booklist-card">
                        <div class="card-header" th:style="'background-color:' + ${booklist.colorTag != null ? booklist.colorTag : '#6c757d'}">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title text-white mb-0">
                                    <a th:href="@{'/booklists/' + ${booklist.listId}}" 
                                       class="text-white text-decoration-none"
                                       th:text="${booklist.listName}">书单名称</a>
                                </h5>
                                <div class="dropdown">
                                    <button class="btn btn-sm text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <a class="dropdown-item" href="#" data-bs-toggle="modal" 
                                               th:data-bs-target="'#editBooklistModal-' + ${booklist.listId}">
                                                <i class="fas fa-edit me-2"></i>编辑
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" th:href="@{'/user/booklists/' + ${booklist.listId} + '/books'}">
                                                <i class="fas fa-book me-2"></i>管理书籍
                                            </a>
                                        </li>
                                        <li th:if="${booklist.isPrivate}">
                                            <a class="dropdown-item make-public-link" href="#" 
                                               th:data-list-id="${booklist.listId}">
                                                <i class="fas fa-globe me-2"></i>设为公开
                                            </a>
                                        </li>
                                        <li th:if="${!booklist.isPrivate}">
                                            <a class="dropdown-item make-private-link" href="#" 
                                               th:data-list-id="${booklist.listId}">
                                                <i class="fas fa-lock me-2"></i>设为私密
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item text-danger delete-booklist-link" href="#" 
                                               th:data-list-id="${booklist.listId}" 
                                               th:data-list-name="${booklist.listName}">
                                                <i class="fas fa-trash-alt me-2"></i>删除
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-3">
                                <span>
                                    <i class="fas fa-book me-1"></i>
                                    <span th:text="${booklist.bookCount + ' 本书'}">25 本书</span>
                                </span>
                                <span th:if="${booklist.isPrivate}" class="badge bg-secondary">
                                    <i class="fas fa-lock me-1"></i>私密
                                </span>
                                <span th:if="${!booklist.isPrivate}" class="badge bg-success">
                                    <i class="fas fa-globe me-1"></i>公开
                                </span>
                            </div>
                            
                            <p class="card-text booklist-description" th:text="${booklist.description}">
                                这是书单的描述，介绍这个书单的主题和内容特点...
                            </p>
                            
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div class="small text-muted">
                                    <i class="far fa-calendar-alt me-1"></i>
                                    <span th:text="${#temporals.format(booklist.createdAt, 'yyyy-MM-dd')}">2023-01-15</span>
                                </div>
                                <div th:if="${!booklist.isPrivate}">
                                    <span class="me-2">
                                        <i class="far fa-heart me-1"></i>
                                        <span th:text="${booklist.favoriteCount}">32</span>
                                    </span>
                                    <span>
                                        <i class="far fa-comment me-1"></i>
                                        <span th:text="${booklist.commentCount}">15</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="d-grid">
                                <a th:href="@{'/booklists/' + ${booklist.listId}}" class="btn btn-outline-primary">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 编辑书单模态框 -->
                    <div class="modal fade" th:id="'editBooklistModal-' + ${booklist.listId}" tabindex="-1" 
                         th:aria-labelledby="'editBooklistModalLabel-' + ${booklist.listId}" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" th:id="'editBooklistModalLabel-' + ${booklist.listId}">
                                        编辑书单
                                    </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form th:id="'editBooklistForm-' + ${booklist.listId}" 
                                          th:action="@{'/user/booklists/' + ${booklist.listId} + '/update'}" method="post">
                                        <div class="mb-3">
                                            <label for="listName" class="form-label">书单名称 <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="listName" name="listName" 
                                                   th:value="${booklist.listName}" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="description" class="form-label">描述</label>
                                            <textarea class="form-control" id="description" name="description" rows="3"
                                                      th:text="${booklist.description}"></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">颜色标签</label>
                                            <div class="d-flex flex-wrap">
                                                <div class="form-check form-check-inline" th:each="color, stat : ${
                                                    {'#dc3545', '#0d6efd', '#198754', '#ffc107', '#0dcaf0', '#6c757d', '#212529'}}">
                                                    <input class="form-check-input" type="radio" 
                                                           th:id="'colorTag-' + ${booklist.listId} + '-' + ${stat.index}" 
                                                           th:name="'colorTag-' + ${booklist.listId}" th:value="${color}"
                                                           th:checked="${booklist.colorTag == color}">
                                                    <label class="form-check-label" 
                                                           th:for="'colorTag-' + ${booklist.listId} + '-' + ${stat.index}">
                                                        <i class="fas fa-circle" th:style="'color:' + ${color}"></i>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">隐私设置</label>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" 
                                                       th:id="'isPrivate-' + ${booklist.listId}" 
                                                       name="isPrivate" value="true"
                                                       th:checked="${booklist.isPrivate}">
                                                <label class="form-check-label" th:for="'isPrivate-' + ${booklist.listId}">
                                                    设为私密（仅自己可见）
                                                </label>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="submit" th:form="'editBooklistForm-' + ${booklist.listId}" class="btn btn-primary">保存更改</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 静态数据（当没有动态数据时显示） -->
                <div class="col booklist-item" th:if="${userBooklists == null || #lists.isEmpty(userBooklists)}"
                     data-color="#dc3545">
                    <div class="card h-100 booklist-card">
                        <div class="card-header" style="background-color: #dc3545">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title text-white mb-0">
                                    <a href="/booklists/1" class="text-white text-decoration-none">我的收藏书单</a>
                                </h5>
                                <div class="dropdown">
                                    <button class="btn btn-sm text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><a class="dropdown-item" href="#"><i class="fas fa-edit me-2"></i>编辑</a></li>
                                        <li><a class="dropdown-item" href="#"><i class="fas fa-book me-2"></i>管理书籍</a></li>
                                        <li><a class="dropdown-item" href="#"><i class="fas fa-lock me-2"></i>设为私密</a></li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item text-danger" href="#"><i class="fas fa-trash-alt me-2"></i>删除</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-3">
                                <span>
                                    <i class="fas fa-book me-1"></i>
                                    15 本书
                                </span>
                                <span class="badge bg-success">
                                    <i class="fas fa-globe me-1"></i>公开
                                </span>
                            </div>
                            
                            <p class="card-text booklist-description">
                                这是我收藏的所有喜欢的书籍，包括科幻、悬疑和历史类书籍。
                            </p>
                            
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div class="small text-muted">
                                    <i class="far fa-calendar-alt me-1"></i>
                                    2023-01-15
                                </div>
                                <div>
                                    <span class="me-2">
                                        <i class="far fa-heart me-1"></i>
                                        24
                                    </span>
                                    <span>
                                        <i class="far fa-comment me-1"></i>
                                        12
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="d-grid">
                                <a href="/booklists/1" class="btn btn-outline-primary">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col booklist-item" th:if="${userBooklists == null || #lists.isEmpty(userBooklists)}"
                     data-color="#0d6efd">
                    <div class="card h-100 booklist-card">
                        <div class="card-header" style="background-color: #0d6efd">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title text-white mb-0">
                                    <a href="/booklists/2" class="text-white text-decoration-none">编程学习书单</a>
                                </h5>
                                <div class="dropdown">
                                    <button class="btn btn-sm text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><a class="dropdown-item" href="#"><i class="fas fa-edit me-2"></i>编辑</a></li>
                                        <li><a class="dropdown-item" href="#"><i class="fas fa-book me-2"></i>管理书籍</a></li>
                                        <li><a class="dropdown-item" href="#"><i class="fas fa-globe me-2"></i>设为公开</a></li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item text-danger" href="#"><i class="fas fa-trash-alt me-2"></i>删除</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-3">
                                <span>
                                    <i class="fas fa-book me-1"></i>
                                    8 本书
                                </span>
                                <span class="badge bg-secondary">
                                    <i class="fas fa-lock me-1"></i>私密
                                </span>
                            </div>
                            
                            <p class="card-text booklist-description">
                                学习编程相关的书籍，包含Python、Java、前端开发等多种编程语言和技术的学习资料。
                            </p>
                            
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div class="small text-muted">
                                    <i class="far fa-calendar-alt me-1"></i>
                                    2023-01-20
                                </div>
                                <div>
                                    <!-- 私密书单没有这些数据 -->
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="d-grid">
                                <a href="/booklists/2" class="btn btn-outline-primary">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col booklist-item" th:if="${userBooklists == null || #lists.isEmpty(userBooklists)}"
                     data-color="#198754">
                    <div class="card h-100 booklist-card">
                        <div class="card-header" style="background-color: #198754">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title text-white mb-0">
                                    <a href="/booklists/3" class="text-white text-decoration-none">历史类书籍</a>
                                </h5>
                                <div class="dropdown">
                                    <button class="btn btn-sm text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><a class="dropdown-item" href="#"><i class="fas fa-edit me-2"></i>编辑</a></li>
                                        <li><a class="dropdown-item" href="#"><i class="fas fa-book me-2"></i>管理书籍</a></li>
                                        <li><a class="dropdown-item" href="#"><i class="fas fa-lock me-2"></i>设为私密</a></li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item text-danger" href="#"><i class="fas fa-trash-alt me-2"></i>删除</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-3">
                                <span>
                                    <i class="fas fa-book me-1"></i>
                                    12 本书
                                </span>
                                <span class="badge bg-success">
                                    <i class="fas fa-globe me-1"></i>公开
                                </span>
                            </div>
                            
                            <p class="card-text booklist-description">
                                收集了各个历史时期的重要著作，包括中国历史和世界历史方面的经典书籍。
                            </p>
                            
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div class="small text-muted">
                                    <i class="far fa-calendar-alt me-1"></i>
                                    2023-01-25
                                </div>
                                <div>
                                    <span class="me-2">
                                        <i class="far fa-heart me-1"></i>
                                        18
                                    </span>
                                    <span>
                                        <i class="far fa-comment me-1"></i>
                                        5
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="d-grid">
                                <a href="/booklists/3" class="btn btn-outline-primary">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无书单提示 -->
            <div class="text-center py-5" id="noBooklistsMessage" style="display: none;">
                <i class="fas fa-list fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">您还没有创建任何书单</h4>
                <p>点击"创建新书单"按钮开始组织您喜欢的书籍</p>
                <button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#createBooklistModal">
                    <i class="fas fa-plus-circle me-2"></i>创建新书单
                </button>
            </div>
            
            <!-- 筛选后无书单提示 -->
            <div class="text-center py-5" id="noFilteredBooklistsMessage" style="display: none;">
                <i class="fas fa-filter fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">没有匹配的书单</h4>
                <p>尝试选择其他颜色标签或查看所有书单</p>
                <button class="btn btn-outline-primary mt-2 color-filter-btn" data-color="all">
                    查看所有书单
                </button>
            </div>
        </div>
        
        <!-- 创建新书单模态框 -->
        <div class="modal fade" id="createBooklistModal" tabindex="-1" aria-labelledby="createBooklistModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="createBooklistModalLabel">创建新书单</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form th:action="@{/user/booklists/create}" method="post" id="createBooklistForm">
                            <div class="mb-3">
                                <label for="newListName" class="form-label">书单名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="newListName" name="listName" required>
                            </div>
                            <div class="mb-3">
                                <label for="newDescription" class="form-label">描述</label>
                                <textarea class="form-control" id="newDescription" name="description" rows="3"></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">颜色标签</label>
                                <div class="d-flex flex-wrap">
                                    <div class="form-check form-check-inline" th:each="color, stat : ${
                                        {'#dc3545', '#0d6efd', '#198754', '#ffc107', '#0dcaf0', '#6c757d', '#212529'}}">
                                        <input class="form-check-input" type="radio" name="colorTag" 
                                               th:id="'newColorTag-' + ${stat.index}" th:value="${color}" 
                                               th:checked="${stat.index == 0}">
                                        <label class="form-check-label" th:for="'newColorTag-' + ${stat.index}">
                                            <i class="fas fa-circle" th:style="'color:' + ${color}"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">隐私设置</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="newIsPrivate" name="isPrivate" value="true">
                                    <label class="form-check-label" for="newIsPrivate">
                                        设为私密（仅自己可见）
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" form="createBooklistForm" class="btn btn-primary">创建</button>
                    </div>
                </div>
            </div>
        </div>
        
        <style>
            .booklist-card {
                transition: transform 0.3s ease;
            }
            .booklist-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            }
            .booklist-description {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                min-height: 4.5em;
            }
            .color-filter-btn {
                transition: all 0.2s ease;
            }
            .color-filter-btn.active {
                transform: scale(1.05);
                font-weight: bold;
            }
        </style>
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 初始化：检查是否有书单，如果没有则显示提示信息
                const booklistItems = document.querySelectorAll('.booklist-item');
                const noBooklistsMessage = document.getElementById('noBooklistsMessage');
                
                if (booklistItems.length === 0) {
                    noBooklistsMessage.style.display = 'block';
                }
                
                // 颜色标签筛选
                const colorFilterBtns = document.querySelectorAll('.color-filter-btn');
                const booklistsContainer = document.getElementById('booklistsContainer');
                const noFilteredBooklistsMessage = document.getElementById('noFilteredBooklistsMessage');
                
                colorFilterBtns.forEach(btn => {
                    btn.addEventListener('click', function() {
                        // 移除所有按钮的高亮
                        colorFilterBtns.forEach(b => b.classList.remove('active'));
                        // 高亮当前按钮
                        this.classList.add('active');
                        
                        const selectedColor = this.getAttribute('data-color');
                        let visibleCount = 0;
                        
                        // 筛选书单
                        booklistItems.forEach(item => {
                            if (selectedColor === 'all' || item.getAttribute('data-color') === selectedColor) {
                                item.style.display = '';
                                visibleCount++;
                            } else {
                                item.style.display = 'none';
                            }
                        });
                        
                        // 切换显示"无匹配书单"提示
                        if (visibleCount === 0 && booklistItems.length > 0) {
                            noFilteredBooklistsMessage.style.display = 'block';
                            booklistsContainer.style.display = 'none';
                        } else {
                            noFilteredBooklistsMessage.style.display = 'none';
                            booklistsContainer.style.display = '';
                        }
                    });
                });
                
                // 删除书单确认
                const deleteBooklistLinks = document.querySelectorAll('.delete-booklist-link');
                deleteBooklistLinks.forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const listId = this.getAttribute('data-list-id');
                        const listName = this.getAttribute('data-list-name');
                        
                        if (confirm(`确定要删除书单"${listName}"吗？此操作不可恢复。`)) {
                            window.location.href = `/user/booklists/${listId}/delete`;
                        }
                    });
                });
                
                // 设置公开/私密
                const makePublicLinks = document.querySelectorAll('.make-public-link');
                makePublicLinks.forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const listId = this.getAttribute('data-list-id');
                        
                        // 发送AJAX请求
                        fetch(`/user/booklists/${listId}/visibility`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="_csrf"]')?.getAttribute('content')
                            },
                            body: JSON.stringify({ isPrivate: false })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 200) {
                                window.location.reload();
                            } else {
                                alert('操作失败: ' + data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('操作失败，请稍后再试');
                        });
                    });
                });
                
                const makePrivateLinks = document.querySelectorAll('.make-private-link');
                makePrivateLinks.forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const listId = this.getAttribute('data-list-id');
                        
                        // 发送AJAX请求
                        fetch(`/user/booklists/${listId}/visibility`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="_csrf"]')?.getAttribute('content')
                            },
                            body: JSON.stringify({ isPrivate: true })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 200) {
                                window.location.reload();
                            } else {
                                alert('操作失败: ' + data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('操作失败，请稍后再试');
                        });
                    });
                });
            });
        </script>
    </section>
</body>
</html> 